<template>
  <transition name="el-zoom-in-center">
    <div class="jsbos-preview-main content_box flow-form-main">
      <div class="jsbos-common-page-header">
        <el-page-header
          @back="goBack"
          :content="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"
        />
        <div class="options">
          <!-- <el-button type="primary" size="mini" @click="nextStepPublish" plain>保 存</el-button>
          <el-button type="primary" size="mini" @click="nextStepSave" plain>预 览</el-button>
          <el-button type="primary" size="mini" @click="nextStepPublish">发 布</el-button> -->
          <el-button @click="goBack" size="mini">返 回</el-button>
        </div>
      </div>
      <div class="main" v-loading="listLoading">
        <!-- <el-steps class="step_pos" :active="activeStep" finish-status="success" align-center>
          <el-step title="基本信息"></el-step>
          <el-step title="设置"></el-step>
          <el-step title="完成"></el-step>
        </el-steps> -->
        <el-row :gutter="15">
          <el-form
            disabled
            ref="elForm"
            :model="dataForm"
            :rules="rules"
            size="small"
            label-width="80px"
          >
            <template v-if="!loading">
              <div>
                <el-card class="box-card" shadow="never">
                  <div slot="header" class="clearfix">
                    <span class="header">&nbsp;</span>&nbsp;&nbsp;
                    <span>基本信息</span>
                  </div>
                  <div class="head_pos">
                    <div class="head_left">
                      <el-form-item label="文章标题" prop="title" required>
                        <el-input
                          v-model="dataForm.title"
                          placeholder=""
                          clearable
                          :style="{ width: '100%' }"
                        >
                        </el-input>
                      </el-form-item>
                      <el-form-item label="文章摘要" prop="abstractContent">
                        <el-input
                          v-model="dataForm.abstractContent"
                          placeholder=""
                          :style="{ width: '100%' }"
                          type="textarea"
                          :rows="3"
                        >
                        </el-input>
                      </el-form-item>
                    </div>
                    <div class="head_right">
                      <el-form-item label="封面图" prop="coverUrl">
                        <UploadCropImg
                          disabled
                          v-model="dataForm.coverUrl"
                          sizeUnit="MB"
                        >
                        </UploadCropImg>
                      </el-form-item>
                    </div>
                  </div>

                  <el-col :span="12" class="col_pos">
                    <el-form-item label="文章分类" prop="articleType" required>
                      <el-cascader
                        style="width: 200px"
                        :options="columnOptions"
                        v-model="dataForm.articleType"
                        :props="{ label: 'columnName', value: 'id' }"
                        clearable
                      ></el-cascader>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="排序" prop="orderNum">
                      <el-input-number
                        :min="0"
                        v-model="dataForm.orderNum"
                        placeholder=""
                        :step="1"
                      >
                      </el-input-number>
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">
                    <el-form-item
                      label="文章详情"
                      prop="articleDetail"
                      required
                    >
                      <quill
                        disabled
                        v-model="dataForm.articleDetail"
                        placeholder=""
                      >
                      </quill>
                    </el-form-item>
                  </el-col>
                </el-card>
              </div>
              <div>
                <el-card class="box-card" shadow="never">
                  <div slot="header" class="clearfix">
                    <span class="header">&nbsp;</span>&nbsp;&nbsp;
                    <span>指定范围</span>
                  </div>
                  <el-col :span="24">
                    <el-radio-group v-model="dataForm.rangeIds">
                      <el-radio label="1">全公司</el-radio>
                      <el-radio label="2">仅创建人</el-radio>
                      <el-radio label="3">指定人员</el-radio>
                    </el-radio-group>
                    <div v-if="dataForm.rangeIds == 3">
                      <filterSelect
                        v-model="list"
                        @input="getChangeData"
                      ></filterSelect>
                    </div>
                  </el-col>
                </el-card>
                <el-card class="box-card" shadow="never">
                  <div slot="header" class="clearfix">
                    <span class="header">&nbsp;</span>&nbsp;&nbsp;
                    <span>发布时间</span>
                  </div>
                  <el-col :span="24">
                    <div class="publish_time">
                      <div>
                        <el-radio-group v-model="dataForm.whetherOnline">
                          <el-radio label="1">立刻发布</el-radio>
                          <el-radio label="2">定时发布</el-radio>
                        </el-radio-group>
                      </div>
                      <div v-show="dataForm.whetherOnline == 2" class="block">
                        <el-date-picker
                          v-model="dataForm.onlineTime"
                          type="datetime"
                          placeholder=""
                        >
                        </el-date-picker>
                      </div>
                    </div>
                  </el-col>
                </el-card>
                <el-card class="box-card" shadow="never">
                  <div slot="header" class="clearfix">
                    <span class="header">&nbsp;</span>&nbsp;&nbsp;
                    <span>是否发布</span>
                  </div>
                  <div class="last_card">
                    <div style="margin-bottom: 10px">
                      <span class="is_publish1">是否置顶</span>
                      <el-radio-group
                        v-model="dataForm.whetherTop"
                        size="small"
                      >
                        <el-radio
                          v-for="(item, index) in whetherTopOptions"
                          :key="index"
                          :label="item.id"
                          :disabled="item.disabled"
                        >
                          {{ item.fullName }}
                        </el-radio>
                      </el-radio-group>
                      <span class="is_publish2">是否最热</span>
                      <el-radio-group
                        v-model="dataForm.whetherHot"
                        size="small"
                      >
                        <el-radio
                          v-for="(item, index) in whetherHotOptions"
                          :key="index"
                          :label="item.id"
                          :disabled="item.disabled"
                        >
                          {{ item.fullName }}
                        </el-radio>
                      </el-radio-group>
                    </div>
                    <div>
                      <span class="is_publish3">是否最新</span>
                      <el-radio-group
                        v-model="dataForm.whetherNew"
                        size="small"
                      >
                        <el-radio
                          v-for="(item, index) in whetherNewOptions"
                          :key="index"
                          :label="item.id"
                          :disabled="item.disabled"
                        >
                          {{ item.fullName }}
                        </el-radio>
                      </el-radio-group>
                      <span class="is_publish4">是否允许点赞</span>
                      <el-radio-group
                        v-model="dataForm.whetherThumbsUp"
                        size="small"
                      >
                        <el-radio
                          v-for="(item, index) in whetherThumbsUpOptions"
                          :key="index"
                          :label="item.id"
                          :disabled="item.disabled"
                        >
                          {{ item.fullName }}
                        </el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                </el-card>
              </div>
            </template>
          </el-form>
        </el-row>
      </div>
    </div>
  </transition>
</template>
<script>
import request from "@/utils/request";

export default {
  components: {},
  props: [],
  data() {
    return {
      listLoading: false,
      columnOptions: [],
      articleTypeOptions: [],
      list: [
        { type: "company", selectArr: [] },
        {
          type: "department",
          selectArr: [],
        },
        {
          type: "Role",
          selectArr: [],
        },
        {
          type: "Position",
          selectArr: [],
        },
        {
          type: "Group",
          selectArr: [],
        },
        {
          type: "user",
          selectArr: [],
        },
        {
          type: "exclude",
          selectArr: [],
        },
      ],
      activeStep: 0,
      visible: false,
      loading: false,
      isDetail: false,
      dataForm: {
        abstractContent: "",
        coverUrl: "",
        title: "",
        abstract: "",
        articleType: "",
        orderNum: "",
        videoUrl: [],
        articleDetail: "",
        rangeIds: "1",
        whetherOnline: "1",
        onlineTime: new Date(),
        whetherTop: "2",
        whetherHot: "2",
        whetherNew: "2",
        whetherThumbsUp: "2",
      },
      rules: {
        title: [
          {
            required: true,
            message: "请输入标题",
            trigger: "change",
          },
        ],
        articleType: [
          {
            required: true,
            message: "请选择文章分类",
            trigger: "change",
          },
        ],
        articleDetail: [
          {
            required: true,
            message: "请输入文章详情",
            trigger: "change",
          },
        ],
      },
      whetherTopOptions: [
        { fullName: "是", id: "1" },
        { fullName: "否", id: "2" },
      ],
      whetherHotOptions: [
        { fullName: "是", id: "1" },
        { fullName: "否", id: "2" },
      ],
      whetherNewOptions: [
        { fullName: "是", id: "1" },
        { fullName: "否", id: "2" },
      ],
      whetherThumbsUpOptions: [
        { fullName: "是", id: "1" },
        { fullName: "否", id: "2" },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    //构造树型结构数据
    // @param {*} data 数据源
    // @param {*} id id字段 默认 'id'
    // @param {*} parentId 父节点字段 默认 'parentId'
    // @param {*} children 孩子节点字段 默认 'children'

    handleTree(data, id, parentId, children) {
      let config = {
        id: id || "id",
        parentId: parentId || "parentId",
        childrenList: children || "children",
      };

      var childrenListMap = {};
      var nodeIds = {};
      var tree = [];
      for (let d of data) {
        let parentId = d[config.parentId];
        if (childrenListMap[parentId] == null) {
          childrenListMap[parentId] = [];
        }
        nodeIds[d[config.id]] = d;
        childrenListMap[parentId].push(d);
      }

      for (let d of data) {
        let parentId = d[config.parentId];
        if (nodeIds[parentId] == null) {
          tree.push(d);
        }
      }

      for (let t of tree) {
        adaptToChildrenList(t);
      }

      function adaptToChildrenList(o) {
        if (childrenListMap[o[config.id]] !== null) {
          o[config.childrenList] = childrenListMap[o[config.id]];
        }
        if (o[config.childrenList]) {
          for (let c of o[config.childrenList]) {
            adaptToChildrenList(c);
          }
        }
      }
      return tree;
    },
    /** 查询栏目树结构 */
    getColumnOptions() {
      let _query = {};
      request({
        url: `/api/cms/CmsColumn/getList`,
        method: "post",
        data: _query,
      })
        .then((res) => {
          var _list = [];
          for (let i = 0; i < res.data.list.length; i++) {
            let _data = res.data.list[i];
            _list.push(_data);
          }
          this.columnOptions = this.handleTree(_list);
        })
        .catch(() => {});
    },
    //返回
    goBack() {
      this.$emit("refresh", true);
    },
    //指定人员
    getChangeData(item) {
      this.dataForm.rangeData = JSON.stringify(item);
    },
    //下一步
    nextStepSave() {
      if (this.activeStep < 2) {
        this.activeStep++;
      }
    },

    //保存
    nextStepUpdate() {
      this.dataFormSubmit();
    },
    //发布
    nextStepPublish() {
      this.dataFormSubmit();
    },
    //上一步
    prevStep() {
      if (this.activeStep > 0) {
        this.activeStep--;
      }
    },
    clearData(data) {
      for (let key in data) {
        if (data[key] instanceof Array) {
          data[key] = [];
        } else if (data[key] instanceof Object) {
          this.clearData(data[key]);
        } else {
          data[key] = "";
        }
      }
    },
    init(id, isDetail) {
      this.getColumnOptions();
      this.dataForm.id = id || 0;
      this.visible = true;
      this.isDetail = isDetail || false;
      this.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        if (this.dataForm.id) {
          this.listLoading = true;
          request({
            url: "/api/cms/CmsContent/" + this.dataForm.id,
            method: "get",
          }).then((res) => {
            this.dataInfo(res.data);
            this.listLoading = false;
          });
        } else {
          // this.clearData(this.dataForm)
        }
      });
      this.$store.commit("generator/UPDATE_RELATION_DATA", {});
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          this.request();
        }
      });
    },
    request() {
      var _data = this.dataList();
      if (!this.dataForm.id) {
        request({
          url: "/api/cms/CmsContent",
          method: "post",
          data: _data,
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: "success",
            duration: 1000,
            onClose: () => {
              this.visible = false;
              this.$emit("refresh", true);
            },
          });
        });
      } else {
        request({
          url: "/api/cms/CmsContent/" + this.dataForm.id,
          method: "PUT",
          data: _data,
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: "success",
            duration: 1000,
            onClose: () => {
              this.visible = false;
              this.$emit("refresh", true);
            },
          });
        });
      }
    },
    dataList() {
      var _data = JSON.parse(JSON.stringify(this.dataForm));
      if (_data.articleType instanceof Array) {
        _data.articleType = _data.articleType[_data.articleType.length - 1];
      }

      _data.videoUrl = JSON.stringify(_data.videoUrl);
      if (_data.coverUrl != null) {
        _data.coverUrl = _data.coverUrl[0];
      }

      return _data;
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll;
      _dataAll.videoUrl = JSON.parse(_dataAll.videoUrl);

      if (_dataAll.ancestors != "0") {
        _dataAll.articleType = _dataAll.ancestors + "," + _dataAll.articleType;
      }

      if (_dataAll.articleType.indexOf(",") != -1) {
        _dataAll.articleType = _dataAll.articleType.split(",");
        _dataAll.articleType.shift();
      }

      if (_dataAll.rangeData != null) {
        this.list = JSON.parse(_dataAll.rangeData);
      }

      this.dataForm = _dataAll;
      this.imageFlag = true;
    },
  },
};
</script>
<style scoped lang="scss">
.step_pos {
  margin-top: 20px;
}

.box-card {
  padding: 20px 150px 20px 150px;
}

.content_box {
  .box-card >>> .el-card__header {
    border: none !important;
  }

  .el-card {
    border: 0px;
    padding: 16px 150px 0px 150px;
  }

  >>> .el-result__icon svg {
    width: 80px;
    height: 80px;
  }

  >>> .change_range {
    padding: 16px 0px 0px 0px;
  }

  >>> .change_data {
    margin-top: 0px;
  }
}

.clearfix {
  font-size: 16px;
  color: black;
}

.header {
  background: #18a6f4;
}

.add_complete {
  font-size: 20px;
}

.back_button {
  margin: 40px 0px;
}

.step_three {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.is_publish1 {
  margin-right: 30px;
}

.is_publish2 {
  margin-left: 200px;
  margin-right: 30px;
}

.is_publish3 {
  margin-right: 30px;
}

.is_publish4 {
  margin-left: 172px;
  margin-right: 30px;
}

.last_card {
  font-size: 14px;
  color: #606266;
  width: 700px;
  background-color: #f3f3f3;
  border: 1px solid #f2f2f2;
  padding: 20px 16px;
  margin-left: 8px;
}

.publish_time {
  height: 32px;
  display: flex;
  align-items: center;
}

.block {
  margin-left: 20px;
}

.content_box {
  >>> .el-card__header {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  >>> .el-card__body {
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 30px;
  }

  >>> .upload_style {
    margin-right: 0px;
  }
}

.head_pos {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.head_left {
  width: 85%;
  margin-left: 6px;
}
</style>
